<script setup lang="ts">
import { inject, Ref, ref, onMounted } from 'vue';
import {
    musicHistory, playListKey, updatePlayerSrcAndPlayKey, playIndexKey, deleteSingerMusicKey,
    deleteSingerMusic, deleteAllMusicKey, collectAllKey
} from '@/type';
const props = defineProps(['isOpen', 'close'])
const playIndex = inject(playIndexKey) as Ref<number>
const musicHistory = inject(playListKey) as Ref<musicHistory[]>
const showFuncIndex = ref(-1);
const updatePlayerSrcAndPlay = inject(updatePlayerSrcAndPlayKey) as (id: string) => void
const deleteSingerMusic = inject(deleteSingerMusicKey) as deleteSingerMusic
const deleteAllMusic = inject(deleteAllMusicKey);
const collectAll = inject(collectAllKey);
const playList = ref<HTMLDivElement | null>(null)
const closePlayList = () => {
    props.close()
    window.document.removeEventListener('click', closePlayList)
}
onMounted(() => {
    console.log(playList);
    playList.value?.addEventListener('mouseleave', () => {
        window.document.addEventListener('click', closePlayList)
    })
    playList.value?.addEventListener('mouseenter', () => {
        window.document.removeEventListener('click', closePlayList)
    })
})
const unPropagationCollect = (e: Event, index: number) => {
    e.stopPropagation()
    console.log(index);
}
const unPropagationDeleteSingle = (e: Event, index: number) => {
    e.stopPropagation()
    deleteSingerMusic(index)
}
</script>
<template>
    <div ref="playList" v-show="props.isOpen" class="container" id="playList">
        <div class="header">
            <h2 class="title">播放列表({{ musicHistory.length }})</h2>
            <div class="btn">
                <div @click="collectAll" class="collects">
                    <img class="collectAll" src="../assets/collect-999.svg">
                    <a class="collectA">收藏全部</a>
                </div>
                <div class="cleans" @click="deleteAllMusic">
                    <img class="trash" src="../assets/trash-999.svg">
                    <a class="cleanAll">清除全部</a>
                </div>
            </div>
        </div>
        <div class="items">
            <ul>
                <li class="item" v-for="history, index of musicHistory" v-show="musicHistory.length != 0"
                    :class="{ itemHover: showFuncIndex == index, highLight: playIndex == index && showFuncIndex != index }"
                    @mouseenter="showFuncIndex = index" @mouseleave="showFuncIndex = -1">
                    <span @click="updatePlayerSrcAndPlay(history.id)" class="musicTitle">{{ history.name }}</span>
                    <div @click="updatePlayerSrcAndPlay(history.id)" class="func"
                        :class="{ funcHide: index != showFuncIndex, funcShow: index == showFuncIndex }">
                        <img class="collect" @click="unPropagationCollect($event, 1)" src="../assets/collect-999.svg"
                            alt="">
                        <img class="trashOne" @click="unPropagationDeleteSingle($event, index)"
                            src="../assets/trash-999.svg">
                    </div>
                    <span class="singerName">{{ history.singerName }}</span>
                    <span class="duration">{{ history.duration }}</span>
                    <span class="from">%</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<style scoped lang="css">
.funcShow {
    opacity: 1;
}

.funcHide {
    opacity: 0;
}

.itemHover {
    background-color: rgba(0, 0, 0, 0.5);
}

.highLight {
    background-color: rgba(0, 0, 0, 0.3);
}

.from {
    margin-left: 10px;
}

.duration {
    margin-left: 10px;
}

.singerName {
    margin-left: 10px;
    width: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.singerName,
.duration,
.from {
    font-size: 12px;
    color: white;
}

.func {
    display: flex;
    align-items: center;
}

.func .collect {
    cursor: pointer;
    height: 22px;
    margin-right: 5px;
    margin-left: 190px;
}

.func .trashOne {
    width: 22px;
    height: 28px;
    cursor: pointer;
}

.musicTitle {
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 25px;
    color: white;
    font-size: 12px;
}

.items ul {
    margin: 0;
    padding-left: 0;
}

.items {
    margin-top: 42px;
}

.item {
    list-style: none;
    height: 28px;
    display: flex;
    align-items: center;
}

.cleanAll {
    color: #ccc;
    font-size: 12px;
}

.btn {
    display: flex;
    margin-left: 208px;
}

.cleans {
    display: flex;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
}

.cleans .trash {
    height: 40px;
    width: 23px;
    margin-right: 5px;
}

.collectA {
    color: #ccc;
    font-size: 12px;
}

.collects {
    display: flex;
    align-items: center;
    padding-right: 5px;
    cursor: pointer;
}

.collectAll {
    width: 22px;
    height: 40px;
    margin-right: 5px;
}

.header {
    display: flex;
    background-color: #1D1D1D;
    height: 40px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #292929;
    position: fixed;
}

.header .title {
    cursor: default;
    display: block;
    width: 150px;
    margin: 0 0 0 20px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
}

.container {
    border-radius: 5px 5px 0 0;
    width: 558px;
    height: 300px;
    background-color: #292929;
    position: fixed;
    bottom: 50px;
    left: calc(50vw - 229px);
    overflow: scroll;
}
</style>